<template>
	<view>
		<tui-list-view>
			<tui-list-cell @click="switchMember" :hover="false" arrow :lineLeft="false" padding="40rpx 60rpx 40rpx 20rpx">
				<view class="replease-list-cell">
					<view class="replease-list-cell-label">
						选择用户：
					</view>
					<view class="replease-list-cell-content">
						{{memberInfo.nickname || ''}} <text v-if="memberInfo.telephone">({{memberInfo.telephone}})</text>
					</view>
				</view>
			</tui-list-cell>
			
			<tui-list-cell  @click="switchService"  :hover="false" arrow  :lineLeft="false"  padding="40rpx 60rpx 40rpx 20rpx">
				<view class="replease-list-cell">
					<view class="replease-list-cell-label">
						选择服务：
					</view>
					<view class="replease-list-cell-content">
						{{serviceInfo.name || ''}} <text v-if="sku.sku || serviceInfo.name">({{sku.sku || serviceInfo.name}})</text>
					</view>
				</view>
			</tui-list-cell>
		</tui-list-view>	
		
		<view class="submit-block">
			<tui-button  style="width: 80%;" class="submit-block-btn" type="danger" shape="circle" @click="replaceOrder">提交</tui-button>
		</view>
		
		
		<tui-top-dropdown  :show="memberShow" :height="800" backgroundColor="#fff">
			<view class="tui-searchbox">
				<view class="tui-search-input">
					<icon type="search" :size='13' color='#333'></icon>
					<input confirm-type="search" placeholder="输入手机号或昵称" :focus="true" auto-focus
						placeholder-class="tui-input-plholder" class="tui-input"  @input="memberSearch" />
				</view>
			</view>
			<view style="height: 620rpx;">
				<scroll-view style="height: 620rpx;" scroll-y scroll-with-animation>
					<tui-list-view>
						<radio-group @change="memberRadio">
							<tui-list-cell v-for="(item,index) in memberList" :key="index" :index="index" :hover="false" :unlined="true">
								<radio color="#4b70f5" :value="index.toString()" :name="item.nickname"
									:checked="index === memberSelectIndex"></radio>
									<text>{{item.nickname}} <text v-if="item.telephone">({{item.telephone}})</text> </text>
							</tui-list-cell>
						</radio-group>
					</tui-list-view>
				</scroll-view>
			</view>
			<view class="dropdown-footer">
				<view class="dropdown-footer-box cannelBut"  @click="switchMember">取消</view>
				<view class="dropdown-footer-box okBut" @click="okMember">确认</view>
			</view>
		</tui-top-dropdown>
		
		<tui-top-dropdown  :show="serviceShow" :height="800" backgroundColor="#fff">
			<view class="tui-searchbox">
				<view class="tui-search-input">
					<icon type="search" :size='13' color='#333'></icon>
					<input confirm-type="search" @confirm="tosearch" placeholder="输入服务名称" :focus="true" auto-focus
						placeholder-class="tui-input-plholder" class="tui-input"  @input="serviceSearch" />
				</view>
			</view>
			<view style="height: 620rpx;">
				<scroll-view style="height: 620rpx;" scroll-y scroll-with-animation>
					<tui-list-view>
						<radio-group @change="serviceRadio">
							<tui-list-cell :hover="false" :unlined="true" v-for="(item,index) in serviceList" :key="index" :index="index">
								<view style="display: flex;align-items: center;">
									<view>
										<radio color="#4b70f5" :value="index.toString()" :name="item.name"
										:checked="index === serviceSelectIndex"></radio>
									</view>
									<view style="display: flex;">
										<image :src="item.image" style="height: 100rpx;width: 100rpx;"></image>
										<text style="margin-left: 20rpx;">{{item.name}}</text>
									</view>
								</view>
								
								<view class="tui-cate-attr" v-if="index === serviceSelectIndex && item.skus.length > 0">
									<view :class="['tui-cate-attr-item', skuitem.id == sku.id ? 'tui-cate-attr-item-active' : '']" @tap="selectSkuF" 
									v-for="(skuitem,sindex) in item.skus" 
									:key="sindex" :data-sku="skuitem">
										<view class="tui-cate-attr-item-title">{{skuitem.sku || item.name}}</view>
										<!-- <view class="tui-cate-attr-item-price">
											<text>￥</text>
											<text class="tui-price">{{skuitem.price}}</text>
										</view> -->
									</view>
								</view>	
								
							</tui-list-cell>
							
						</radio-group>
					</tui-list-view>
				</scroll-view>
			</view>
			<view class="dropdown-footer">
				<view class="dropdown-footer-box cannelBut"  @click="switchService">取消</view>
				<view class="dropdown-footer-box okBut" @click="okService">确认</view>
			</view>
		</tui-top-dropdown>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				memberShow:false,
				serviceShow:false,
				
				memberList:[],
				memberSeleted:{},
				memberSelectIndex:-1,
				memberInfo:{},
				
				serviceList:[],
				serviceSelected:{},
				serviceSelectIndex:-1,
				serviceInfo:{},
				
				sku:{},
			}
		},
		onLoad:function(e){
			console.log('load')
			this.$request.post('member.search').then(res => {
				if (res.errno == 0) {
					this.memberList = res.data
				}
			})	
			
			this.$request.post('goods.searchService').then(res => {
				if (res.errno == 0) {
					this.serviceList = res.data;				
				}
			})	
		},
		methods: {
			replaceOrder: function(){
				let param = {
					goods_id:this.serviceInfo.id,
					uid:this.memberInfo.id,
					sku:this.sku.sku,
					type:'store'
				}
				console.log("param: ",param)
				this.$request.post('order.replace',param).then(res => {
					if (res.errno == 0) {
						uni.showModal({
							title:'提示',
							content:'下单成功',
							showCancel:false,
						})				
					}else{
						uni.showModal({
							title:'提示',
							content:'下单失败',
							showCancel:false,
						})
					}
				})
			},
			
			switchMember:function(){
				this.memberShow = !this.memberShow
			},
			memberSearch: function(e) {
				console.log(e)
				var that = this;
				let key = util.trim(e.detail.value);
				if (!key) {
					this.memberList = [];
					return;
				}
				console.log("key: ",key)
				this.$request.post('member.search', {keyword:key}).then(res => {
					if (res.errno == 0) {
						that.memberList = res.data;				
					}
				})
			},
			memberRadio(e) {				
				console.log("e.target.value : ",e.target.value);
				this.memberSelectIndex  = parseInt(e.target.value)
				this.memberSeleted = this.memberList[this.memberSelectIndex]
				console.log("memberSeleted: ",JSON.stringify(this.memberSeleted));
			},
			okMember(){
				this.memberInfo = this.memberSeleted
				this.switchMember()
				console.log("memberInfo: ",JSON.stringify(this.memberInfo));
			},
			
			
			switchService:function(){
				this.serviceShow = !this.serviceShow
			},
			serviceRadio(e) {
				console.log("e.target.value: ",e.target.value);
				this.serviceSelectIndex = parseInt(e.target.value)
				this.serviceSelected = this.serviceList[this.serviceSelectIndex]
				this.sku = this.serviceSelected.skus[0]
				console.log("serviceSelected: ",JSON.stringify(this.serviceSelected));
			},
			serviceSearch: function(e) {
				console.log(e)
				var that = this;
				let key = util.trim(e.detail.value);
				if (!key) {
					this.serviceList = [];
					return;
				}
				console.log("key: ",key)
				this.$request.post('goods.searchService', {keyword:key}).then(res => {
					if (res.errno == 0) {
						that.serviceList = res.data;				
					}
				})
			},
			okService(){
				this.serviceInfo = this.serviceSelected
				this.switchService()
				console.log("serviceInfo: ",JSON.stringify(this.serviceInfo));
			},
			
			selectSkuF(e) {
				this.sku = e.currentTarget.dataset.sku;
				console.log('sku:',JSON.stringify(this.sku));
			}
		}
	}
</script>

<style>
	.replease-list-cell{
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
	}
	
	.replease-list-cell-label{}
	
	.replease-list-cell-content{}
	
	.submit-block{
		margin-top: 40rpx;
		display: flex;
		justify-content: center;
		text-align: center;
	}
	
	/* .submit-block-btn{
		width: 80%;
	} */
	
	.tui-searchbox {
		height: 80rpx;
		padding: 10rpx 10rpx;
		box-sizing: border-box;
		border-bottom: 1rpx solid #f2f2f2;
	}
	
	.tui-search-input {
		width: 100%;
		height: 60rpx;
		border-radius: 30rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		background: #f2f2f2;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}
	
	.tui-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}
	
	.tui-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}
	
	
	
	.dropdown-header{
		height: 80rpx;
		width: 100%;
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}
	.dropdown-header-left{
		padding-left: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		width: 700rpx;
		border-radius: 40rpx;
		border: 1rpx solid #a6a6a6;
		box-sizing: border-box;
	}
	.dropdown-header-left-input{
		height: 60rpx;
	}
	.dropdown-header-right{
		line-height: 60rpx;
		height: 60rpx;
		width: 60rpx;
	}
	.dropdown-header-right-icon{
		height: 60rpx;
		width: 60rpx;
	}
	
	
	
	.placeholder{
		padding-left: 20rpx;
	}
	
	.dropdown-footer{
		height: 100rpx;
		display: flex;
	}
	.dropdown-footer-box{
		width: 50%;
		line-height: 100rpx;
		text-align: center;
	}
	.cannelBut{
		background-color: #f2f2f2;
	}
	.okBut{
		background-color: #4b70f5;
		color: #fff;
	}
	
	.tui-cate-attr {
		background-color: #f2f2f2;
		display: flex;
		flex-wrap: wrap;
		align-content:center;
		align-items:center;
		padding: 0 20rpx 20rpx 0;
		box-sizing: border-box;
	}
	
	.tui-cate-attr-item {
		max-width: 96%;
		min-width: 30%;
		height: 140rpx;
		padding: 26rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		margin: 20rpx 0 0 20rpx;
		border:solid 1rpx #ebf0f0
	}
	.tui-cate-attr-item-title{
		font-size: 32rpx;
		font-weight: 500;
	}
	.tui-cate-attr-item-price{
		color:#e41f19;
	}
	
	.tui-cate-attr-item-active {
		border-color:#e41f19;
		background-color: #ffe5e5;
		opacity: 0.6;
	}
</style>
